<body class="gr">

<div class="navBar">
	<a class="left" href="javascript:history.back()"><i class="return"></i></a>
	<div class="titleView">{if isset($data.category->name)}{$data.category->name}{else}商品列表{/if}</div>
</div>

<div class="goods-list main-padding-top width-wrap">
	<div class="pullRefresh" category_id="{if isset($category_id)}{$category_id}{/if}">
		<!--<header class="ge-bottom ge-light">
			<ul class="switchView">
				<li {if !isset($order_field)}class="this"{/if}>
					<a href="wap.php?app=goods&act=index{if isset($category_id)}&category_id={$category_id}{/if}{if isset($ext_property)}&ext_property={$ext_property}{/if}{if isset($title)}&title={$title}{/if}">综合</a>
				</li>
				<li {if isset($order_field) && $order_field=='sales'}class="this"{/if}>
					<a href="wap.php?app=goods&act=index{if isset($category_id)}&category_id={$category_id}{/if}{if isset($ext_property)}&ext_property={$ext_property}{/if}&order_field=sales{if isset($order_sort)}&order_sort={if $order_sort=='desc'}asc{else}desc{/if}{/if}{if isset($title)}&title={$title}{/if}">销量</a>
				</li>
				<li {if isset($order_field) && $order_field=='price'}class="this"{/if}>
					<a href="wap.php?app=goods&act=index{if isset($category_id)}&category_id={$category_id}{/if}{if isset($ext_property)}&ext_property={$ext_property}{/if}&order_field=price{if isset($order_sort)}&order_sort={if $order_sort=='desc'}asc{else}desc{/if}{else}&order_sort=asc{/if}{if isset($title)}&title={$title}{/if}">价格</a>
				</li>
				<li>
					<a class="filter" href="javascript:void(0)">筛选</a>
				</li>
			</ul>
		</header>-->
		<ul class="list goods-item">
			{foreach from=$data.goods name=g item=g}
			<li>
				<a href="wap.php?app=goods&act=detail&goods_id={$g->id}&integral=1">
					<div class="pic" style="background-image:url({$g->default_pic});"></div>
					<div class="title"><div>{$g->name}</div><font class="btn"><b>立即兑换</b></font><span class="integral">{$g->integral}积分</span></div>
				</a>
			</li>
			{/foreach}
		</ul>
	</div>
</div>

<script>
var offset = $('.pullRefresh .list > li').length;
function createHtml(g){
	var html = '<li>\
		<a href="wap.php?app=goods&act=detail&goods_id='+g.id+'&integral=1">\
			<div class="pic" style="background-image:url('+g.default_pic+');"></div>\
			<div class="title"><div>'+g.name+'</div><font class="btn"><b>立即兑换</b></font><span class="integral">'+g.integral+'积分</span></div>\
		</a>\
	</li>';
	offset++;
	return html;
}
function setLists(){
	var width = ($('.pullRefresh').width()-10*3) / 2;
	$('.list li').width(width);
	$('.list a .pic').loadbackground();
}
setLists();
$(window).resize(setLists);
$(function(){
	$('header').sticky({ scroller:$('.pullRefresh') });
	$('html, body, .pullRefresh').addClass('height-wrap');
	$('.goods-list').height($.window().height-$('.goods-list').padding().top);
	/*$('.switchView').switchView({ column:'column', index:$('.switchView .this').index() });*/
	$('.filter').click(function(){
		getFilter(function(){
			var filterView = this;
			setTitleView();
			filterView.find('.reset').click(function(){
				filterView.find('form')[0].reset();
			});
			filterView.find('.btn').click(function(){
				var category = filterView.find('[name="category_id"]:checked'), brand = filterView.find('[name="brand_id"]:checked'),
					title = category.length ? category.attr('title') : '{if isset($title)}{$title}{/if}',
					min_price = filterView.find('#min_price').val(), max_price = filterView.find('#max_price').val(),
					category_id = category.length ? category.val() : '{if isset($category_id)}{$category_id}{/if}',
					brand_id = brand.length ? brand.val() : '';
				location.href = 'wap.php?app=goods&act=index&category_id='+category_id+{if isset($ext_property)}'&ext_property={$ext_property}'+{/if}'&brand_id='+brand_id+'&min_price='+min_price+'&max_price='+max_price+'&title='+title.urlencode();
			});
		});
	});
	$('.pullRefresh').pullRefresh({
		header : true,
		footer : true,
		footerNoMoreText : '- END -',
		refresh : function(fn){
			var _this = this;
			offset = 0;
			$.getJSON('api.php?app=goods&act=index{if isset($category_id)}&category_id={$category_id}{/if}{if isset($ext_property)}&ext_property={$ext_property}{/if}{if isset($brand_id)}&brand_id={$brand_id}{/if}{if isset($min_price)}&min_price={$min_price}{/if}{if isset($max_price)}&max_price={$max_price}{/if}{if isset($order_field)}&order_field={$order_field}{/if}{if isset($order_sort)}&order_sort={$order_sort}{/if}', function(json){
				if(json.error!=0){ $.overloadError(json.msg);return }
				var html = '';
				if($.isArray(json.data.goods))for(var i=0; i<json.data.goods.length; i++)html += createHtml(json.data.goods[i]);
				_this.find('.list').html(html);
				setLists();
				fn();
			});
		},
		load : function(fn){
			var _this = this;
			$.getJSON('api.php?app=goods&act=index{if isset($category_id)}&category_id={$category_id}{/if}{if isset($ext_property)}&ext_property={$ext_property}{/if}{if isset($brand_id)}&brand_id={$brand_id}{/if}{if isset($min_price)}&min_price={$min_price}{/if}{if isset($max_price)}&max_price={$max_price}{/if}{if isset($order_field)}&order_field={$order_field}{/if}{if isset($order_sort)}&order_sort={$order_sort}{/if}', { offset:offset }, function(json){
				if(json.error!=0){ $.overloadError(json.msg);return }
				var html = '';
				if($.isArray(json.data.goods))for(var i=0; i<json.data.goods.length; i++)html += createHtml(json.data.goods[i]);
				_this.find('.list').append(html);
				setLists();
				fn();
			});
		}
	});
});

function getFilter(fn){
	var html = '<div class="filterView" cls="filterView-face">\
		<div>\
			<div class="navBar">\
				<div class="titleView">筛选</div>\
			</div>\
			<form onSubmit="return false">\
			<ul class="tableView tableView-noMargin tableView-light main-top">\
				<li><h1>\
					<div class="label">类别</div>\
					<div>\
						{if count($data.categories)}{foreach from=$data.categories name=g item=g}<span><input type="radio" name="category_id" id="category{$g->id}" value="{$g->id}" title="{str_replace("'","\'",$g->name)}" /><label for="category{$g->id}"><div>{str_replace("'","\'",$g->name)}</div></label></span>{/foreach}{else}<span><input type="radio" name="category_id" id="category{$category_id}" value="{$category_id}" title="{if isset($title)}{str_replace("'","\'",$title)}{/if}" /><label for="category{$category_id}"><div>{if isset($title)}{str_replace("'","\'",$title)}{/if}</div></label></span>{/if}\
						<div class="clear"></div>\
					</div>\
				</h1></li>\
				<li><h1>\
					<div class="label">价格</div>\
					<div>\
						<font>价格区间(元)</font><font><input type="tel" name="min_price" id="min_price" placeholder="最低价" /> - <input type="tel" name="max_price" id="max_price" placeholder="最高价" /></font>\
						<div class="clear"></div>\
					</div>\
				</h1></li>\
				<li><h1>\
					<div class="label">品牌</div>\
					<div>\
						{foreach from=$data.brands name=g item=g}<span><input type="radio" name="brand_id" id="brand{$g->id}" value="{$g->id}" /><label for="brand{$g->id}"><div>{str_replace("'","\'",$g->name)}</div></label></span>{/foreach}\
						<div class="clear"></div>\
					</div>\
				</h1></li>\
			</ul>\
			</form>\
			<div class="bottomView ge-top ge-light">\
				<a class="btn" href="javascript:void(0)">确定</a><a class="reset gr" href="javascript:void(0)">重置</a>\
			</div>\
		</div>\
	</div>';
	var face = $.overlay(html, function(){
		var face = this, close = $('<div style="width:100%;height:100%;"></div>');
		face.prepend(close);
		close.click(function(){
			$.overlay(false, function(){
				face.find('.filterView').removeClass('filterView-x');
				setTimeout(function(){ face.remove() }, 310);
			});
		});
		setTimeout(function(){ face.find('.filterView').addClass('filterView-x') }, 0);
	});
	fn.call(face.find('.filterView'));
}
</script>